<template>
	<view class="u-padding-30 order-page">
		<view class="payment-info">
			<view class="u-p-t-30 u-p-b-30 bold">订单信息</view>

			<view class="calculation-data">
				<view class="data-title">订单流水号</view>
				<view class="data-text">
					{{payment.serial_code}}
				</view>
			</view>
			<view class="calculation-data" v-if="payment.state!=='paid'">
				<view class="data-title">创建时间</view>
				<view class="data-text">{{$u.timeFormat(payment.created, 'yyyy-mm-dd hh:MM:ss')}}</view>
			</view>
			<view class="calculation-data" v-if="payment.state==='paid'">
				<view class="data-title">付款时间</view>
				<view class="data-text">{{$u.timeFormat(payment.pay_complete_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">订单状态</view>
				<view class="data-text">{{stateDesc}}</view>
			</view>
		</view>

		<view class="goods-list">
			<view class="u-p-t-30 u-p-b-30 bold">商品列表</view>
			<view class="item" v-for="(item, index) in payment.goods_list" :key="index">
				<view class="left">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="content u-flex-1">
					<view class="title u-line-2">{{ item.item_name }}</view>
					<view class="type">{{ item.item_remark }}</view>
					<view class="type">{{ item.product_code }}</view>
				</view>
				<view class="right">
					<view class="price">
						￥{{item.unit_price}}
					</view>
					<view class="number">x{{ item.quantity }}</view>
				</view>
			</view>
			<u-gap height="40"></u-gap>

			<view class="calculation-data">
				<view class="data-title">商品总重</view>
				<view class="data-value">{{payment.total_weight}}g</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">商品总价</view>
				<view class="data-value">￥ {{payment.total_amount}}</view>
			</view>

			<view class="calculation-data">
				<view class="data-title">配送费</view>
				<view class="data-value">￥ {{payment.service_fee}}</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">红包抵扣</view>
				<view class="data-value">￥ {{payment.discount_amount}}</view>
			</view>
			<u-line />
			<view class="data-sum">共节省 <text class="red">{{payment.discount_amount}}</text> 元； 实付金额 ￥ <text
					class="bold">{{payment.pay_amount}}</text></view>

		</view>

		<view class="u-demo-wrap">
			<view class="u-padding-10 welcome">欢迎加入中勘石油微商城</view>

			<view class="u-demo-area btn-line">
				<u-button type="primary" size="medium" plain shape="circle" @click="openPage('/pages/index/store')">联系客服</u-button>
				<u-button type="error" size="medium" shape="circle" @click="backUcp">会员中心</u-button>
			</view>
			<u-line color="#5f6161" />
			<view class="u-p-t-30 tips">
				<view class="u-flex"><view class="u-flex-1">门店地址：{{shop.address}}</view>
						<u-button size='mini' shape="circle" style="margin-left:.5em"
							@click="openLocation"><u-icon name="map" color="#2979ff" size="28"></u-icon>查看位置</u-button></view>

			</view>
		</view>

		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<!-- <wx-share :title="shareTitle" :desc="shop.store_introduction" :imgUrl="user.avatar" :link="currentPage"
			ref="wxs"></wx-share> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPage: location.href,
				scrollTop: 0,
				showWxNativePay: false,
				showPaymentRemark: false,
				wxNativePayQRCode: '',
				paymentId: '',
				payment: {
					goods_list: []
				},
				storeId:'',
				payment_remark: '',
				payMethods: [{
						text: '微信支付',
						color: 'green',
						fontSize: 28,
						subText: '直接使用微信付款',
						payMethod: 'wx-jsapi'
					},
					{
						text: '微信收款码',
						color: 'green',
						fontSize: 28,
						subText: '扫码付款，可请朋友代付',
						payMethod: 'wx-native'
					},
					{
						text: '微信H5支付',
						color: 'green',
						fontSize: 28,
						subText: '手机浏览器客户端H5网页支付',
						payMethod: 'wx-mweb'
					}
				],
				tips: {
					text: '选择支付方式',
					color: '#909399',
					fontSize: 24
				},
				showPayMethod: false,
				shop: {}
			}
		},
		computed: {
			shareTitle() {
				if (this.user.nickname) {
					return this.user.nickname + '的订单'
				}
				return '我的订单@' + this.shop.name;
			},
			stateDesc() {
				if (this.payment.state === 'pending_pay') {
					return '订单待支付'
				}
				if (this.payment.state === 'paid') {
					if (this.payment.delivery_state === 'complete') {
						return '订单已完成'
					}
					if (this.payment.delivery_state === 'store_handling') {
						return '商家捡货中'
					}
					if (this.payment.delivery_state === 'pending_receive') {
						return '商家配送中'
					}
					if (this.payment.delivery_state === 'pending_pickup') {
						return '待自提'
					}
					return '订单已支付';
				}
				if (this.payment.state === 'pending_refund') {
					return '订单退款处理中';
				}
				if (this.payment.state === 'refunded') {
					return '订单已退款';
				}
				if (this.payment.state === 'expired') {
					return '订单已失效';
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			if (options.ticket) {
				this.paymentId = options.ticket;
				this.getPayment();
			} else {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			if (options.store_id){
				this.storeId = options.store_id;
			}
			this.getShop();
		},
		onShow() {

		},
		methods: {
			getPayment() {
				this.$u.post('/payment/shopping-receipt', {
					ticket: this.paymentId
				}).then(res => {
					this.payment = res;
					this.payment_remark = res.user_remark;
				}).catch(e => {

				})
			},
			deliveryStateText(deliveryState){
				if(deliveryState==='uncertain'){
					return '不确定'
				}
				if(deliveryState==='complete'){
					return '已完成'
				}
				if(deliveryState==='store_handling'){
					return '商家配货中'
				}
				if(deliveryState==='pending_receive'){
					return '待收货'
				}
				if(deliveryState==='pending_pickup'){
					return '待自提'
				}
				return deliveryState
			},
			deliveryTypeText(type){
				if(type==='delivery'){
					return '配送到家'
				}
				if(type==='pickup'){
					return '门店自提'
				}
				if(type==='neednot'){
					return '不需要发货'
				}
				return type;
			},
			openPage(jumpURL, params = {}) {
				console.log(jumpURL,params)
				this.$u.route({
					type: 'to',
					params: params,
					url: jumpURL,
					animationType: 'slide-in-bottom'
				});
			},
			backHome(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			backUcp(){
				uni.switchTab({
					url: '/pages/ucp/index'
				})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			openLocation() {
				if (!this.shop.lat || !this.shop.lng) {
					console.log('open location false;')
					return false;
				}
				let that = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log(res)
						const latitude = parseFloat(that.shop.lat);
						const longitude = parseFloat(that.shop.lng);
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							name: that.shop.name,
							address: that.shop.address,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.order-page {
		background-color: #F1F1F1;
	}

	.u-demo-wrap {
		background-color: #FFF;
		padding: 20px 10px;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;

		.welcome {
			color: #848686;
		}

		.tips {
			width: 100%;
			color: #848686;
		}

		.order-state {
			font-weight: bold;
			margin-bottom: 14rpx;
		}

		.btn-line {
			display: flex;
			flex-direction: row;
			padding: 24rpx;
			box-sizing: border-box;
			// width: 100%;
		}

		.u-btn {
			margin: 0 10rpx;
		}


	}

	.goods-list {
		background-color: #FFF;
		padding: 0 30rpx 30rpx 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.bold {
			font-weight: bold;
			border-bottom: 1rpx solid #c9c8d2;
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.calculation-data {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 30rpx;

			.data-title {
				font-weight: bold;
			}
		}

		.u-line {
			margin-top: 30rpx !important;
		}

		.data-sum {
			padding-top: 30rpx;
			width: 100%;
			text-align: right;

			.red {
				color: red;
				padding-left: 10rpx;
				padding-right: 10rpx;
			}

			.bold {
				font-size: 36rpx;
			}
		}
	}

	.delivery-info {
		background-color: #FFF;
		padding: 0 30rpx 30rpx 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.bold {
			font-weight: bold;
			border-bottom: 1rpx solid #c9c8d2;
		}

		.calculation-data {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 30rpx;
			// margin-bottom: 10rpx;

			.data-title {
				width: 6em;
				font-weight: bold;
			}

			.data-text {
				flex: 1
			}
		}

	}

	.payment-info {
		background-color: #FFF;
		padding: 0 30rpx 30rpx 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.bold {
			font-weight: bold;
			border-bottom: 1rpx solid #c9c8d2;
		}

		.calculation-data {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 30rpx;
			// margin-bottom: 10rpx;

			.data-title {
				width: 6em;
				font-weight: bold;
			}

			.data-text {
				flex: 1
			}
		}

	}
</style>
